<template>
  <div class="icoPage">
    <assets-head :title="$t('首发交易')"/>
    <div class="icoCoinBox px-32 mt-28">
      <div class="icoCoinItems py-32 px-32 rounded-2xl mb-30" >
        <div class="icoCoin">
          <div class="flex items-center">
            <img :src="`${HOST_URL}/symbol/${icoDetailsData.isUserIco ? icoDetailsData.product_name.toLocaleLowerCase() :icoDetailsData.name.toLocaleLowerCase()}.png`"
                 alt="logo" class="w-72 h-72 rounded-full mr-16" />
            <span class="symbol">{{icoDetailsData.name ? icoDetailsData.name : icoDetailsData.product_name}}</span>
          </div>
          <div class="py-14 text-white font-25 px-21 rounded-lg" :class="icoDetailsData.today_flag === true ? 'btnMain' : 'bg-grey text-grey'" @click="isBuyIco">{{$t('立即申购')}}</div>
        </div>
        <!--        状态-->
        <div class="icoCoin">
          <div class="title">{{$t('状态')}}:</div>
          <div>{{stateTextCop(icoDetailsData)}}</div>
        </div>
        <div class="icoCoin" v-if="icoDetailsData.isUserIco">
          <div class="title">{{$t('数量')}}:</div>
          <div>{{icoDetailsData.totle_price}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{icoDetailsData.isUserIco ? $t('剩余总量')  :$t('活动总量')}}:</div>
          <div>{{icoDetailsData.isUserIco ? icoDetailsData.remain_amount : icoDetailsData.amount_limit}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('开始申购时间')}}:</div>
          <div>{{icoDetailsData.isUserIco ? icoDetailsData.product_apply_time :icoDetailsData.apply_time}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('结束申购时间')}}:</div>
          <div>{{icoDetailsData.isUserIco ? icoDetailsData.product_sell_time : icoDetailsData.sell_time}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('接受币种')}}:</div>
          <div>USDT</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('活动币种')}}:</div>
          <div>{{icoDetailsData.isUserIco ? icoDetailsData.product_name : icoDetailsData.name}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('个人限购次数')}}:</div>
          <div>{{$t('无限')}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('个人限购数量')}}:</div>
          <div>{{$t('无限')}}</div>
        </div>
        <div class="icoCoin">
          <div class="title">{{$t('最小申购额')}}:</div>
          <div>{{'--' }}</div>
        </div>
        <div class="line">
          <div>{{$t('产品详情')}}</div>
        </div>
      </div>
    </div>

    <!--    新币申购弹窗-->
    <van-popup class="w-748 bg-white" v-model="isShow" round>
      <div class="py-30 px-40">
        <div class="font-40 mb-40">{{$t('新币申购')}}</div>
        <div class="icoDetail flex justify-between items-center">
          <div class="font-32">{{icoDetailsData.name}}</div>
          <div class="">
            <div>
              <span class="font-60">{{icoDetailsData.price}}</span>
              <span class="font-24"> USDT</span>
            </div>
            <div class="font-24 mb-20">{{$t('发行价格')}}</div>
          </div>
        </div>
        <div class="font-26 mb-40 mt-16">
          <span>{{$t('上市日期')}}</span>
          <span>{{icoDetailsData.sell_time}}</span>
        </div>
        <div class="flex justify-between">
          <div class="font-28">{{$t('请输入申购数量')}}</div>
          <div class="font-26">
            <span class="mr-16">{{$t('可购数量额度')}}</span>
            <span>{{icoDetailsData.remain_amount}}</span>
          </div>
        </div>
        <div class="inputBox">
          <div>
            <input v-model="amount" :placeholder="$t('申购数量')" class="w-full h-90 border-none text-left rounded-lg" style="text-indent: 16px;background-color: #F5F5F5" type="number" />
          </div>
          <div class="text-grey font-26 mt-16 mb-20">
            <span>{{$t('可用金额')}}</span>
            <span class="pl-8 font-600">{{userInfo.balance}}</span>
            <span>USDT</span>
          </div>
          <div>
            <span class="font-26">{{ $t('总额') }}</span>
            <span class="colorMain px-16 font-48">{{ $bigDecimal.round($bigDecimal.multiply(icoDetailsData.price,amount),2)}}</span>
            <span class="colorMain font-26">USDT</span>
          </div>
        </div>
        <div class="btnMain w-full rounded-lg text-center h-100 lh-100 text-white mt-30" @click="throttleFn">
          <span>{{$t('申购')}}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';
import {Progress, Popup, List, PullRefresh} from 'vant';
import { mapGetters } from 'vuex';
import { throttle } from '@/utils/utis'
import {_getIcoDetails, _icoApplyOrder, _icoUserOrder,} from "@/API/ico";
import AssetsHead from "@/components/assets-head/index.vue";
import {HOST_URL} from "@/config";
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    AssetsHead,
    [Progress.name]:Progress,
    [Popup.name]:Popup,
    [List.name]: List,
    [PullRefresh.name]:PullRefresh,
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      icoCoins:[],
      isShow:false,
      popupData:{},
      amount:undefined,
      session_token:'',
      page: 1,
      isLoading:false,
      buySellLoading:false,
      buySellFinished:false,
      icoId:'',
      icoDetailsData:{},
      HOST_URL,
      isBuy:false,
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    ...mapGetters('user', ['userInfo']),

  },
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    stateTextCop(item){
      // console.log('stateTextCop',item);
      let text = ''
      if(item.isUserIco){
        if(item.state === '1'){
          text = this.$t('已中签')
        }else if(item.state === '2'){
          text = this.$t('未中签')
        }else{
          text = this.$t('未开始')
        }
      }else{
        if(item.today_flag === 'finish'){
          text = this.$t('已完成')
        }else if(item.today_flag){
          text = this.$t('进行中')
        }else{
          text = this.$t('即将开始')
        }
      }
      return text
    },
    isBuyIco(){
      if(this.icoDetailsData.today_flag === true){
        this.isShow =true
      }
    },
    getIcoDetails(){
      if(this.icoDetailsData.id){
        _getIcoDetails({
          id:this.icoDetailsData.id
        }).then(res=>{
          // console.log('res',res.data.product);
          this.session_token =res.data.session_token;
        })
      }else{
        this.$router.replace('/ico')
      }
    },
    //节流下单
    throttleFn: throttle(function (type) {
      this.applyOrdel()
    }, 500),

    // ico下单
    applyOrdel(){
      if(this.userInfo.token){
        _icoApplyOrder({
          session_token: this.session_token,
          amount: this.amount,
          ico_product_id: this.icoDetailsData.id
        }).then(res=>{
          if(res.code === '0'){
            this.isShow = false
            this.$toast(this.$t('购买成功'))
            this.$router.replace('/ico')
          }
        })
      }else{
        this.$toast(this.$t('请先登录'))
        this.$router.replace('/login')
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
    // console.log('thisthis',this.$route.params)
    this.icoDetailsData = this.$route.params.icoData
    if(this.icoDetailsData.today_flag === true){
      this.getIcoDetails()
    }
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  beforeCreate() {
  },
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>


<style scoped lang="scss">
@import "@/assets/init";
.icoPage{
  min-height: 100vh;
  @include themify(){
    background: themed('ico_bg');
  }
  #assetsHead{
    ::v-deep .van-nav-bar{
      @include themify(){
        background: themed('ico_bg');
      }
    }
  }
}
.ico{
  .icoTabsItems{
    font-size: 32px;
    color: #474A55;
    padding-bottom: 12px;
  }
  .icoTabsItemsActive{
    @include themify(){
      border-bottom: 2px solid themed('color_main');
      color: themed('color_main');
      font-weight: 700;
    }
  }
  /*  .icoItems:first-child {
      margin-left: 42px;
    }*/
  .icoTabsItems:nth-child(n+2){
    margin-left: 42px;
  }
}
.icoCoinBox{
  .icoCoinItems{
    background: #fff;
    .icoCoin{
      margin-bottom: 56px;
      .title{
        opacity: 0.5;
      }
      .symbol{
        font-size: 32px;
        font-weight: 700;
      }
    }
    .icoCoin:first-child{
      border-bottom: 1px solid rgb(229,233,240);
      padding-bottom: 32px;
    }
    .icoCoin:last-child{
      margin-bottom: 0;
    }
    .icoCoin{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .line{
      border-top: 1px solid rgb(229,233,240);
      padding-top: 32px;
    }
  }
}
</style>